<template>
	<view class="">
		<zh-collapse @change='change' :default_unfold='[1,2]' >
			<zh-collapse-item v-for="item in list" :title='item.title' :content="item.content"
				@clickContent='clickContent'>
				<!-- <view class="" slot='title'>支持定义面板标题</view>
                <view class="" slot='cont'>支持定义内容</view> -->
			</zh-collapse-item>
		</zh-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						title: '面板标题1',
						content: '面板展开1内容'
					},
					{
						id: 2,
						title: '面板标题2',
						content: '面板展开2内容'
					},
					{
						id: 3,
						title: '面板标题3',
						content: '面板展开3内容'
					},
					{
						id: 4,
						title: '面板标题4',
						content: '面板展开4内容'
					}
				]
			}
		},
		methods: {
			change(e) {
				console.log(e);
			},
			clickContent(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>